<template>
    <div class="group">
        <div class="topForm">
            <el-form :inline="true" :model="formInline" size="mini" @submit.native.prevent>
                <el-form-item label="组名">
                    <el-input v-model="formInline.label" placeholder="请输入分组名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <my-button type="primary" v-throttle:200='search'>查询</my-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="createGroup">
            <my-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @btnClick="handle({type:'add'})">创建分组</my-button>
        </div>

        <myDialog ref="myDialog" @addTree='addTree'></myDialog>

        <!-- 表格 -->
        <table-list :searchForm='formInline' ref='tableList' @handle='handle'></table-list>
    </div>
</template>

<script>
    import tableList from './tableList.vue'
    import myDialog from './myDialog.vue'
    export default {
        data(){
            return{
                formInline:{
                    label:'',
                    treeStructure:false
                },
            }
        },
        components:{
            myDialog,
            tableList
        },
        methods:{
            //查询
            search(){
                this.$refs.tableList.getTreeList(this.formInline)
            },
            //添加分组
            addTree(){
                this.search()
            },
            handle(payload){
                this.$nextTick(()=>{
                    this.$refs.myDialog.open(payload)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .group{
        padding: 20px;
        height: 100%;
        overflow-y: auto;
        .topForm{
            border-bottom: 1px solid #e8e8e8
        }
        .createGroup{
            padding: 20px 0;
        }
    }
</style>